<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>盒子模型</title>
		<style>
			/* 盒子模型4个元素:content内容,padding内边距,border边框,margin外边距 */
			.box{
				width: 200px;    /* 宽 */
				height: 300px;    /* 高 */
				/* border-width: 1px;   边框宽度
				border-color: red;    边框颜色:颜色单词，#6位十六进制数
				边框样式border-style: solid实线;  dotted点线 dashed虚线
				border-style:solid
				边框的复合写法 */
				border: 1px solid rgb(168, 62, 177); 
				border-bottom: 10px dotted red;
				border-top: 10px dashed green;
				border-left: 5px solid pink;
				border-right: 5px solid gold;
				/* 方位词:top上,bottom下,left左,right右,center中间 */
				/* padding-top: 50px;
				padding-left: 30px; */
				/* 复合写法: */
				/* padding: 10px;   四个方位的内边距都是10px */
				/* padding: 10px 30px;  第一值上下,第二个值左右 */
				/* padding: 10px 20px 30px; 第一个上,第二个左右,第三个下 */
				/* padding: 10px 20px 30px 40px; 上，右，下，左(顺时针) */
			}
		</style>
	</head>
	<body>
		<div class="box">hello box</div>
	</body>
</html>
